<template>
    <div class="search-history-container">
        <van-cell
            title="历史记录"
        >
            <div v-if="historyList.length" slot="default">
                <van-icon v-if="!isEdit" name="delete-o" @click="isEdit=true" />
                <div class="operation" v-else>
                    <span @click="$emit('resetHistories', [])">全部删除</span>
                    <span @click="isEdit=false">完成</span>
                </div>
            </div>
        </van-cell>
        <van-cell
            v-for="(history, index) in historyList"
            :key="index"
            :title="history"
            @click="delItem(index, history)"
        >
            <div slot="right-icon">
                <van-icon
                    v-if="isEdit"
                    name="close"
                />
            </div>
        </van-cell>
    </div>
</template>

<script>
// import { mapState } from 'vuex';
// import { setItem } from '@/utils/storage';

export default {
    name: 'search_history',
    components: {
    },
    props: {
        historyList: {
            type: Array,
            require: true
        }
    },
    // 定义属性
    data () {
        return {
            isEdit: false
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        delItem (index, searchText) {
            if (this.isEdit) {
                this.historyList.splice(index, 1);
                // setItem('search-histories', this.historyList);
                this.isEdit = this.historyList.length;
            } else {
                this.$emit('search', searchText);
            }
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
.search-history-container {
    .operation {
        span {
            &:first-child {
                margin-right: 10px;
            }
        }
    }
}
</style>
